<template>
  <div class="app-container">
    <div class="change">
      <p>
        <span>执行标准</span>
        <el-input v-model="tempData.standard" type="text" class="userselect" placeholder="请输入执行标准" />
      </p>
      <p>
        <span>提交人</span>
        <el-input v-model="tempData.submitperson" type="text" class="userselect" disabled />
      </p>
      <p>
        <span>文件上传</span>
        <el-upload
          class="upload-demo"
          drag
					:show-file-list="false"
          :on-success="upSuccess"
          :http-request="designUpFile"
          :on-remove="fileRemove"
          action
          :multiple = 'false'
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">
            将文件拖到此处，或
            <em>点击上传</em>
          </div>
        </el-upload>
				<strong>{{tempData.standurl}}</strong>
      </p>
    </div>
    <div class="submit" @click="submit" :class="isClick ? 'disable' : ''">
      <p>提交</p>
    </div>
  </div>
</template>

<script>
import { uploadFile } from '@/api/people'
import { addEwmBiaozhun,updateEwmBiaozhun } from '@/api/ewmApi'
export default {
  data() {
    return {
      value1: "",
      value2: "",
      tempData: {},
      uploaded: false,
      isClick: false,
			writeOradd: 0  //判断是修改0 还是增加1
    };
  },
  mounted() {
    console.log(this.$route.params);
    if (this.$route.params.options) {
			this.tempData = JSON.parse(this.$route.params.options);
			console.log(this.tempData)
			this.writeOradd = 0
    } else {
			this.writeOradd = 1
      this.tempData = {
        standard: "",
        standurl: ""
      };
      this.tempData.submitperson = this.$store.state.user.userInfo[0].username
    }
  },
  methods: {
    upSuccess(res) {
      console.log(res);
    },
    fileRemove(res) {
      console.log(res);
    },
    // 上传文件
    designUpFile(item) {
      console.log(this.fileNum);
      this.uploaded = false
      var formData = new FormData();
      formData.append("file", item.file);
      const loading = this.$loading({
        lock: true,
        text: '上传中请稍等...',
        spinner: 'el-icon-loading',
        background: 'rgba(255, 255, 255, 0.8)'
      })
      // return
      uploadFile(formData).then(res => {
        console.log(res);
        this.tempData.standurl = res
        this.uploaded = true
        loading.close()
      });
		},
		submit(){
      // 提交修改增加
      this.isClick = true
			if(this.writeOradd == 0){
				updateEwmBiaozhun(this.tempData).then(res => {
					console.log(res)
					this.$message({
						showClose: true,
						message: res.message,
						type: 'success'
					})
					this.$router.push({
						name: 'Zhixingbiaozhun'
					})
				})
			}else{
				addEwmBiaozhun(this.tempData).then(res => {
					console.log(res)
					this.$message({
						showClose: true,
						message: res.message,
						type: 'success'
					})
					this.$router.push({
						name: 'Zhixingbiaozhun'
					})
				})
			}
		}
  }
};
</script>

<style lang="scss" scoped>
.change {
  display: flex;
  flex-wrap: wrap;
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  > p {
    width: 80%;
    font-size: 14px;
    display: flex;
		flex-wrap: wrap;
    align-items: center;
    color: #333;
    /deep/.el-input__inner {
      // width: inherit;
      background: none;
      height: 32px;
      // line-height: 32px;
      color: #333;
      border: 1px solid rgba(0, 0, 0, 0.1);
      padding: 0 25px;
    }
    /deep/.el-input__icon {
      line-height: 32px;
    }
		/deep/.el-upload-dragger {
			width: 100%;
		  height: 100px;
		}
		/deep/.el-upload-dragger .el-icon-upload {
		  font-size: 60px;
		  color: #C0C4CC;
		  margin: 0; 
		  line-height: 1;
			width: 100%;
		}
		/deep/.el-upload {
			width: 100%;
		}
		.userselect {
		  // max-width: 250px;
		  flex: 1;
		}
		.upload-demo{
			width: 100%;
			flex: 1;
		}
    .userselect {
      // max-width: 250px;
      flex: 1;
    }

    > span {
      display: block;
      width: 120px;
      text-align: right;
      padding-right: 15px;
    }
    > input {
      width: inherit;
      flex: 1;
      height: 32px;
      border-radius: 3px;
      border: 1px solid rgba(0, 0, 0, 0.1);
      padding-left: 10px;
      color: #333;
    }
		>strong{
			display: inline-block;
			// position: absolute;
			// left: 0;
			// bottom: 0;
			padding-left: 120px;
			// width: 100%;
			font-weight: 100;
			font-size: 14px;
		}
  }
}
.disable{
  pointer-events:none;
  >p{
    background: #808080 !important;
  }
}
.submit {
  padding-left: 140px;
  display: flex;
  background-color: #fff;
  border-radius: 0 0 8px 8px;
  > p {
    width: 80px;
    height: 32px;
    border-radius: 3px;
    font-size: 14px;
    text-align: center;
    line-height: 32px;
    background: #18a05e;
    margin: -15px 0 20px 0;
    color: white;
    cursor: pointer;
  }
}
</style>
